
<template>
    <div class='goodsinfo'>
        <el-row type="flex" class="row-bg">
            <el-col :span="10">
                <img :src="items.img">
            </el-col>
            <el-col :span="14" class="info">
                <h1>{{items.title}}</h1>
                <el-row>
                    <p class="desc"><strong>“</strong>{{items.des}}<strong>”</strong></p>
                </el-row>
                <div class="material-title">用料：</div>
                <el-row>
                    <dl class="material-info">
                        <dt class="red">主料</dt>
                        <dd>{{items.cailiao}} </dd>
                    </dl>
                </el-row>
                <el-row>
                    <dl class="material-info">
                        <dt class="grey">辅料</dt>
                        <dd>{{items.fzcailiao}}</dd>
                    </dl>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      items: {
        // cailiao: "2016-05-02",
        // fzcailiao: "2016-05-03",
        // title: "香辣鸡翅",
        // des: "土豆是低热能、多维生素和微量元素的食物，是理想的减肥食品。每100克土豆含钾高达300毫克。专家认为，每周吃5～6个土豆可使中风几率下降40%。土豆中含有丰富的膳食纤维，有助促进胃肠蠕动 ，疏通肠道。因此土豆对辅助治疗消化不良、习惯性便秘、神疲乏力、慢性胃痛、关节疼痛、皮肤湿疹等症有良好效果，是胃病和心脏病患者的优质保健食品。土豆还可以降糖降脂，美容、抗衰老等。 猪肉含有丰富的优质蛋白质和必需的脂肪酸，并提供血红素（有机铁）和促进铁吸收的半胱氨酸，能改善缺铁性贫血；具有补肾养血，滋阴润燥的功效；但由于猪肉中胆固醇含量偏高，故肥胖人群及血脂较高者不宜多食。",
        // img: "https://qq897425998.github.io/Menu/images/wing.jpg"
      }
    };
  },
  mounted() {
    const id = this.$route.params.id;
    axios({
      method: "get",
      url: "/menus/" + id
    })
      .then(res => {
        console.log(res.data.data);
        this.items = res.data.data[0];
      })
      .catch(() => {
        console.log(error);
      });
  }
};
</script>
<style scoped>
.goodsinfo img {
  width: 100%;
  display: block;
  min-height: 400px;
}
.row-bg {
  background: #fff;
}
h1 {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 30px;
}
.info {
  padding: 24px;
}
p.desc {
  line-height: 24px;
  font-size: 14px;
  padding: 10px 0;
  color: #666;
}
p.desc strong {
  font-size: 24px;
  color: #ddd;
  font-family: arial;
  font-weight: bold;
  padding: 0px 3px;
}
.material-title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 10px;
  color: #c0ae7d;
}
.material-info,
.fl-info {
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 18px;
  font-size: 14px;
  padding-top: 8px;
  display: flex;
  flex: 1;
}
.fl-info .seasoning {
  line-height: 22px;
}
.practice {
  margin-top: 20px;
  margin-bottom: 50px;
  padding: 20px;
  width: 800px;
  box-shadow: 0 1px 2px #c1c1c1;
}
.practice h2 {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 10px;
  padding-bottom: 20px;
}
.red {
  background: #e90808;
  height: 24px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  border: 1px solid #e90808;
  margin-right: 10px;
  width: 50px;
}
.grey {
  color: #999;
  background: #f5f5f5;
  margin-right: 10px;
  font-size: 12px;
  width: 50px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #ddd;
}
dd {
  width: 80%;
  line-height: 26px;
}
</style>
